<template>
	<view class="login">
		<block v-if="submit">
			<view class="login-title">
				<view class="login-title-hello"> 您好， </view>
				<view class="login-title-where"> 欢迎登录九健医疗 </view>
			</view>
			<view class="login-admin">
				<uni-forms ref="form">
					<uni-forms-item label="" name="">
						<input type="text" placeholder="请输入手机号" v-model="username"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" value="" />
					</uni-forms-item>
					<uni-forms-item label="" name="">
						<input type="password" value="" v-model="password"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item label="" name=""
						style="display:flex;align-item:center;justify-content: space-between;">
						<input type="number" placeholder="请输入验证码" v-model="code"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" value="" />
						<view class="code" @click.stop="get_code">{{time}}{{text}}</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<button class="login-btn" type="default" @tap="login" :disabled="btn">登录</button>
			<view class="login-xieyi">
				<view>
					<checkbox-group @change="agreeChange">
						<label>
							<checkbox value="true" :checked="agree == 'true'" style="transform: scale(0.7)" />
							勾选代表同意<text class="login-xieyi-color" @click.stop="handleView('service')">服务协议</text>及<text
								class="login-xieyi-color" @click.stop="handleView('privacy')">隐私协议</text>
						</label>
					</checkbox-group>
				</view>
				<view> 登录前请阅读 </view>
			</view>
		</block>
		<block v-else>
			<view class="success-icon">
				<image src="../../static/success.png" />
			</view>
			<view class="success-title"> 资料提交成功 </view>
			<view class="success-time"> 结果将在1-2个工作日反馈 </view>
			<view class="btn-back" @tap="backBtn"> 关闭页面 </view>
		</block>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import baseUrl from '@/request/baseUrl.js'
	export default {
		data() {
			return {
				baseUrl: baseUrl,
				submit: true,
				username: "",
				password: "",
				agree: "",
				deviceId: '',
				disabled: false,
				text: '获取验证码',
				time: '',
				code: ''
			};
		},
		computed: {
			btn() {
				if (this.username && this.password && this.code) {
					return false;
				} else {
					return true;
				}
			},
		},
		onShow() {
			const res = uni.getDeviceInfo()
			this.deviceId = res.deviceId
			console.log(res, '000')
			// uni.hideHomeButton();
		},
		methods: {
			...mapMutations(["setStorage"]),
			login() {
				if (this.agree == "true") {
					this.$https
						.post("/user/login", {
							account: this.username,
							password: this.password,
							device_id: this.deviceId,
							captcha: this.code
						})
						.then((res) => {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: "none",
							});
							/* 登录成功 */
							if (res.code == 1) {
								this.setStorage(res.data.userinfo);
								uni.navigateTo({
									url: "/pages/home/index",
								});
							}
						});

					/* uni.getUserProfile({
						desc: "获取个人信息",
						success: (res) => {
							console.log(res, 888);
							this.setStorage(res.userInfo)
							console.log(this.$store.state);
							uni.login({
								provider: 'weixin',
								success: res1 => {
									console.log(res1, 777);
								}
							})
						}
					}) */
					/* uni.navigateTo({
						url:'../index/index'
					}) */
				} else {
					uni.showToast({
						title: "请阅读并同意服务协议",
						icon: "none",
					});
				}
			},
			isMobile(mobile) {
			    return /^1[3-9]\d{9}$/.test(mobile);
			},
			//获取验证码
			async get_code() {
				if (this.disabled) {
					return;
				}
				if(!this.isMobile(this.username)){
					uni.showToast({
						title: '手机号不正确',
						icon: "none",
						duration: 1500,
					})
					return
				}
				
				// this.setInterValFunc();//开启倒计时
				// return
				uni.showLoading({
					title: '发送中',
					mask: true
				});

				uni.request({
					url: `${this.baseUrl}api/sms/sendCaptcha`,
					data: {
						mobile: this.username,
					},
					method: 'post',
					success: re => {
						console.log(re.data, 'ressssssssssssss')
						if (re.data.code == 1) {
							this.disabled = true;
							setTimeout(function() {
								uni.hideLoading();
							}, 100);
							this.setInterValFunc(); //开启倒计时
						} else {
							uni.showToast({
								title: re.data.msg,
								icon: "none",
								duration: 2000,
							})
						}
					}
				})
			},
			//倒计时
			setInterValFunc(e) {
				this.time = e || 60;
				this.text = '秒';
				this.setTime = setInterval(() => {
					if (this.time - 1 <= 0) {
						this.time = '';
						this.text = '重新获取';
						if (e) {
							this.text = '获取验证码';
						}
						this.code = '';
						this.disabled = false;
						clearInterval(this.setTime);
						if (uni.getStorageSync('userInfo')) {
							this.text = '获取验证码';
						}
					} else {
						this.time--;
					}
				}, 1000);
			},
			// 同意协议
			agreeChange(e) {
				if (e.detail.value.length == 0) {
					this.agree = "";
				} else {
					this.agree = e.detail.value[0];
				}
				console.log(this.agree, 999);
			},
			// 查看协议
			handleView(val) {
				uni.navigateTo({
					url: `/pages/protocol/protocol?type=${val}`,
				});
			},
			// 关闭
			backBtn() {
				this.submit = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.success-icon {
		width: 160rpx;
		height: 160rpx;
		margin: auto;
		margin-top: 250rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.success-title {
		font-size: 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #434343;
		margin: 16rpx 0;
		text-align: center;
	}

	.success-time {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #646466;
		margin: 0 0 100rpx;
		width: 100%;
		text-align: center;
	}

	.btn-back {
		width: 670rpx;
		height: 96rpx;
		background: $public-oclor;
		color: #ffffff;
		font-size: 32rpx;
		line-height: 96rpx;
		text-align: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin: auto;
		border-radius: 48rpx;
	}

	button[disabled][type="default"] {
		background-color: #acc8ff;
		color: #ffffff;
	}

	.login {
		width: 100%;

		&-title {
			width: 100%;
			margin: 48rpx 0 0 64rpx;
			color: #303030;

			&-hello {
				font-weight: 500;
				font-size: 64rpx;
			}

			&-where {
				line-height: 68rpx;
				font-size: 32rpx;
			}
		}

		&-user {
			padding: 0 64rpx;
			color: #979797;

			&-hospital {
				margin-top: 80rpx;
				position: relative;

				input {
					border-bottom: 2rpx solid #edeef2;
				}

				&-hospitalList {
					position: absolute;
					top: 50rpx;
					width: 100%;
					z-index: 99;
					background-color: #ffffff;
					border: 2rpx solid #fafafa;

					&-child {
						line-height: 50rpx;
					}
				}
			}

			&-rules {
				font-size: 24rpx;
				margin: 30rpx 0 60rpx;

				&-href {
					color: $public-oclor;
					border-bottom: 2rpx solid $public-oclor;
				}
			}
		}

		&-admin {
			margin: 0rpx 64rpx;

			input {
				border-bottom: 2rpx solid #edeef2;
				margin-top: 66rpx;
			}

			.code {
				width: 158rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				line-height: normal;
				background: linear-gradient(90deg, #303030, #edeef2);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #fff;
				margin-top: 50rpx;
				padding: 10rpx 16rpx;
			}
		}

		&-btn {
			margin: 0 64rpx;
			height: 96rpx;
			border-radius: 48rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			color: #fff;
			background-color: #1a66ff;
			margin-top: 70rpx;
		}

		&-btn::after {
			border: none;
		}

		&-xieyi {
			width: 100%;
			position: absolute;
			bottom: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #646466;
			font-size: 22rpx;
			line-height: 40rpx;

			&-color {
				color: $public-oclor;
			}
		}
	}
</style>